﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>提交订单</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="{:_SKIN}/weixin/order/css/amazeui.min.css"/>
    <link rel="stylesheet" href="{:_SKIN}/weixin/order/css/style.css"/>
    {:jq()}
    <script src="{:_SKIN}/weixin/order/js/amazeui.min.js"></script>
</head>
<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">

<style type="text/css">
    .am-badge { font-size: 0.2rem }
    input { font-size: 0.8rem !important; }
    .am-header .am-header-title { font-size: 1rem }
    .am-form-group { margin-bottom: 0.5rem }
    .am-btn ,.am-text-sm{ font-size: 0.8rem }
    .am-padding-sm{ padding: 0.5rem }
    .am-list { margin-bottom: 0.5rem 0}
    .am-margin-bottom-sm { margin-bottom: 0 }

</style>

<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.go(-1)" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a  class="">提交订单</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="{:url('weixin/index/index')}" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>

    <div class="gray-panel">
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 确认商品信息</h2>
            <div class="cart-list-panel">
                <ul class="am-avg-sm-1 cart-panel-ul">
                    <li>
                        <div class="imgpanel"><a href="#"><img src="{$t.pic}"  class="am-img-responsive" /></a></div>
                        <div class="infopanel" style="width:">
                            <h3 style="width: 160px;overflow: hidden;height: 21px"><a>{$t.name}</a></h3>
                            <p>单价：<span class="red2 bold">{$data.dj}</span> </p>
                            <p>规格：<span class="red2 bold">{$data.gg}</span> </p>
                            <p>数量：<span class="red2 bold">{$data.num}</span></p>
                            <p>总价：<span class="red2 bold">{$data.zj}</span> 元  </p>
                        </div>
                    </li>

                </ul>
            </div>


        </div>

        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">2</span> 确认收货地址</h2>
            <p><i class="am-icon-location-arrow"></i> 收货地址</p>
            <form class="am-form am-form-inline">
                <div class="am-form-group">
                    <input type="text" class="am-form-field am-radius ucity" id='city-picker' value="{$u.city}" placeholder="请选择省市县">
                </div>
                <div class="am-form-group">
                    <input type="text" class="am-form-field uaddress am-radius" value="{$u.address}" placeholder="详细地址">
                </div>
                <hr data-am-widget="divider" style="" class=" am-divider-default am-margin-bottom-sm"/>

                <div class="am-form-group am-form-icon">
                    <i class="am-icon-user"></i>
                    <input type="text" class="am-form-field uname am-radius" value="{$u.name}" placeholder="真实姓名">
                </div>
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-phone"></i>
                    <input type="text" class="am-form-field utel am-radius" value="{$u.tel}" placeholder="手机号码">
                </div>



                <input type="hidden" value="1" name="paytype" id="paytype">
            </form>
        </div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">3</span> 支付方式</h2>
            <ul class="am-list am-text-sm my-pay-ul">
                <li><a href="javascript:;" rel="1" class="hover"><span class="am-fr"><i class="am-icon-check-circle"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="{:_SKIN}/weixin/order/pic/wechat.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;微信支付</a></li>


                <!--     <li><a href="javascript:;" rel="2"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span><img src="pic/alipay.png" class="payimg" /> 支付宝支付</a></li>

                    <li><a href="javascript:;" rel="3"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="pic/money.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;余额支付 &nbsp;&nbsp; <samll class="my-pay-yue">金币余额：<span class="red2">1001</span>  &nbsp;&nbsp;<span onClick="window.location.href='#'" class="red2">充值</span></samll></a></li> -->
            </ul>

            <div>
                <ul class="am-avg-sm-2 am-text-center">
                    <li class="am-text-center am-padding-sm" style="width: 100%"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius" onclick="pay();">立即付款</button></li>

                </ul>
            </div>
        </div>
    </div>


    <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/city-picker.min.js"></script>

    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <script type="text/javascript">
    var csxid='';
        wx.config({$qm|json_encode});

        function pay(){

            var data={

                id:"{$t.id}",
                gg:"{:input('gg')}",
                num:"{:input('num')}",
                name:$(".uname").val(),
                tel:$(".utel").val(),
                address:$(".uaddress").val(),
                city:$(".ucity").val(),
                csxid:csxid


            };

            
            if(data.id && data.tel && data.address && data.city){
                 $.showLoading();


                $.post("{:url('weixin/my/getproductorder')}", data ,function(res){


                    var  options = res;

                    // 支付成功后的操作
                    options.success = function () {
                         window.location.href = "{:url('weixin/my/order',['type'=>'yfk'])}";
                    };


                    options.cancel= function (res) {  
                     $.hideLoading();

                     }







                    // 传入参数，发起JSAPI支付
                    wx.chooseWXPay(options);


                });


            }else{

                alert('请将资料输入完整！');
                return false;
            }






        }

        wx.ready(function () {

            wx.hideAllNonBaseMenuItem();

        });

    </script>
    <script>

        $("#city-picker").cityPicker({
            title: "请选择省市县",
        onChange: function (picker, values, displayValues) {
         csxid=values;

        }
        });












        $(document).ready(function(e) {
            $(".my-pay-ul li > a").click(function(){
                $(".my-pay-ul li > a").removeClass('hover');
                $(".my-pay-ul li > a i").removeClass('am-icon-check-circle').addClass('am-icon-circle-thin');
                $(this).addClass('hover');
                var val = $(this).attr('rel');
                $("#paytype").val(val);
                $(this).find('i').removeClass('am-icon-circle-thin').addClass('am-icon-check-circle');


            });
        });
    </script>


    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <div class="am-footer-miscs ">
            <p>CopyRight©2014 AllMobilize Inc.</p>
            <p>搜禾网</p>
        </div>
    </footer>
    <!--底部-->

</div>
</body>
</html>
